<template>
  <div>
    <div class="first">
      <!-- 菜品名 -->
      <van-nav-bar
        class="nav"
        left-arrow
        @click-left="onClickLeft"
        :title="theDish.dishName"
      >
        <template #right>
          <van-icon name="medal-o" size="30" />
        </template>
      </van-nav-bar>
      <!-- F2 菜品 -->
      <div class="f2">
        
        <div class="left"><img :src="theDish.dishPic" alt="" /></div>
        <div class="right">
          <span
            >单价：<span
              ><span>{{ theDish.price }}</span
              >元</span
            ></span
          >
          <span
            >总价：<span
              ><span>{{ (theDish.sum = sum1) }}</span
              >元</span
            ></span
          >
          <van-button
            icon="shopping-cart-o"
            @click="toMy()"
            size="small"
            type="success"
            >加入订单</van-button
          >
        </div>
      </div>
      <van-divider content-position="left">您还可以加菜</van-divider>
    </div>
    <div class="second">
      <van-pull-refresh @refresh="onRefresh" v-model="refreshing" success-text="刷新成功" success-duration="1000">
      <!-- 加菜 -->
      <div class="f3" v-for="(item, i) in adds" :key="i">
        <div class="left"><img :src="item.pic" alt="" /></div>
        <div class="right">
          <div>
            <span>{{ item.dname }}:</span>
            <span
              ><span>{{ item.price }}</span
              >元</span
            >
          </div>

          <div>
            数量：<van-stepper
              v-model="item.num"
              theme="round"
              min="0"
              button-size="22"
              disable-input
            ></van-stepper>
          </div>
        </div>
      </div>
    </van-pull-refresh>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, watch, onMounted, computed } from "vue";
import { useRoute, useRouter } from "vue-router";
import $http from "@/http";
import dish from "@/types/dish";
import { showSuccessToast, showFailToast } from "vant";
// import "vant/lib/index.css";
const route = useRoute();
const router = useRouter();
const theDish = ref({});
const adds = reactive([
  {
    pic: "/img/14.jpg",
    dname: "鸭腿",
    price: 7,
    num: 0,
  },
  {
    pic: "/img/6.jpg",
    dname: "鸡腿",
    price: 6,
    num: 0,
  },
  {
    pic: "/img/17.jpg",
    dname: "卤蛋",
    price: 2,
    num: 0,
  },
  {
    pic: "/img/30.png",
    dname: "豆干",
    price: 1,
    num: 0,
  },
  {
    pic: "/img/22.jpg",
    dname: "加肉",
    price: 5,
    num: 0,
  },
  {
    pic: "/img/20.jpg",
    dname: "青菜",
    price: 3,
    num: 0,
  },
  {
    pic: "/img/18.jpg",
    dname: "米饭",
    price: 3,
    num: 0,
  },
]);
// 返回上一页
const onClickLeft = () => {
  history.back();
};
// 下拉刷新
const refreshing=ref(false)
const onRefresh=()=>{
  setTimeout(()=>{
    refreshing.value=false
  },500)
  
}
//get菜品
onMounted(() => {
  $http.dishApi
    .queryById(route.query.dishId)
    .then((res) => {
      //console.log(res);
      theDish.value = res.data.data[0];
    })
    .catch((err) => console.log(err));
});
// 加入购物车
const  toMy =async () => {
  let orderName = theDish.value.dishName;
  let orderPic = theDish.value.dishPic;
  let price = theDish.value.price;
  let sum = theDish.value.sum;
  const res= await $http.orderApi
    .add({
      orderName,
      orderPic,
      price,
      sum,
    })
  if(res.data.code==200){
    showSuccessToast('提交订单成功')
  }else{
    showFailToast('提交订单失败')
  }

  router.push("/home/my");
};
// 计算总价格
const sum1 = computed(() => {
  return adds.reduce((ad, n) => {
    return ad + n.price * n.num;
  }, theDish.value.price);
});
</script>

<style lang="scss" scoped>
.first {
  position: fixed;
  width: 100%;
  z-index: 100;
  background-color: white;
}
.second {
  width: 100%;
  padding-top: 300px;
  padding-bottom: 70px;
}
.f2 {
  padding: 15px 3px;
  display: flex;
  > .left {
    margin-right: 60px;
    > img {
      width: 180px;
      height: 140px;
    }
  }
  > .right {
    color: #07c160;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    > span {
      > span {
        > span {
          color: red;
          font-size: 25px;
        }
      }
    }
  }
}

.f3 {
  display: flex;
  padding: 10px 10px;
  > .left {
    margin-right: 30px;
    > img {
      width: 130px;
      height: 100px;
    }
  }
  > .right {
    color: #07c160;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    > div:nth-child(1) {
      display: flex;
      justify-content: space-between;
      > span:nth-child(2) {
        > span {
          color: red;
          font-size: 22px;
        }
      }
    }
  }
}
</style>
<style lang="scss">
:root {
  --van-nav-bar-background: #07c160;
  --van-nav-bar-title-text-color: white;
  --van-nav-bar-height: 70px;
  --van-nav-bar-icon-color: red;
  --van-nav-bar-title-font-size: 24px;
  --van-nav-bar-z-index: 100;
  --van-divider-border-color: #07c160;
  --van-divider-text-color: #07c160;
  --van-divider-font-size: 20px;
}
</style>